<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: #DF3033;
			}

			span {
				position: absolute;
				display: block;
				left: 0;
				top: 200px;
				width: 50px;
				height: 50px;
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<div></div>
		<span></span>
		<button class="c500">c500</button>
		<button class="c800">c800</button>
		<button>点击起飞</button>
		<script type="text/javascript">
			var div = document.querySelector('div');
			var span = document.querySelector('span');
			var c500 = document.querySelector('.c500');
			var c800 = document.querySelector('.c800');

			animate(div, 500);
			c500.addEventListener('click', function() {
				animate(span, 500, function() {
					console.log("牛皮呀");
					span.style.backgroundColor = "purple";
				});
			})
			c800.addEventListener('click', function() {
				animate(span, 800);
			})


		</script>
	</body>
</html>
